React useEvent: Event Handlers Stabiliseren voor Robuuste Applicaties

`useEvent` in de Praktijk Gebruiken

Laten we de vorige voorbeelden opnieuw bekijken en `useEvent` toepassen om de problemen op te lossen.

Verouderde Closures Oplossen

            
import React, { useState, useEffect, useCallback } from 'react';

function useEvent(handler) {
    const handlerRef = React.useRef(handler);

    React.useLayoutEffect(() => {
        handlerRef.current = handler;
    }, [handler]);

    return React.useCallback((...args) => {
        // @ts-expect-error because arguments might be incorrect
        return handlerRef.current(...args);
    }, []);
}

function MyComponent() {
  const [count, setCount] = useState(0);
  const [alertCount, setAlertCount] = useState(0);

  useEffect(() => {
    const intervalId = setInterval(() => {
      setCount(prevCount => prevCount + 1);
    }, 1000);

    return () => clearInterval(intervalId);
  }, []);

  const handleClick = useEvent(() => {
    setAlertCount(count);
    alert(`Count is: ${count}`);
  });

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Show Count</button>
      <p>Alert Count: {alertCount}</p>
    </div>
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

Nu is `handleClick` een stabiele functie, maar wanneer deze wordt aangeroepen, heeft het via de ref toegang tot de meest recente waarde van `count`. Dit voorkomt het probleem van de verouderde closure.

Onnodige Re-renders Voorkomen

            
import React, { useState, memo, useCallback } from 'react';

function useEvent(handler) {
  const handlerRef = React.useRef(handler);

    React.useLayoutEffect(() => {
        handlerRef.current = handler;
    }, [handler]);

    return React.useCallback((...args) => {
        // @ts-expect-error because arguments might be incorrect
        return handlerRef.current(...args);
    }, []);
}

const ChildComponent = memo(({ onClick }) => {
  console.log('ChildComponent re-rendered');
  return <button onClick={onClick}>Click Me</button>;
});

function ParentComponent() {
  const [count, setCount] = useState(0);

  const handleClick = useEvent(() => {
    setCount(count + 1);
  });

  return (
    <div>
      <p>Count: {count}</p>
      <ChildComponent onClick={handleClick} />
    </div>
  );
}

export default ParentComponent;

            

              
                Copy
              
            
          

Omdat `handleClick` nu een stabiele functiereferentie is, zal `ChildComponent` alleen opnieuw renderen wanneer de props *daadwerkelijk* veranderen, wat de prestaties verbetert.

Alternatieve Implementaties en Overwegingen

`useEvent` met `useLayoutEffect`

In sommige gevallen moet u mogelijk `useLayoutEffect` gebruiken in plaats van `useEffect` binnen de `useEvent`-implementatie. `useLayoutEffect` wordt synchroon uitgevoerd na alle DOM-mutaties, maar voordat de browser de kans heeft om te painten. Dit kan belangrijk zijn als de event handler de DOM onmiddellijk na het activeren van de gebeurtenis moet lezen of wijzigen. Deze aanpassing zorgt ervoor dat u de meest up-to-date DOM-staat binnen uw event handler vastlegt, waardoor mogelijke inconsistenties worden voorkomen tussen wat uw component weergeeft en de gegevens die het gebruikt. De keuze tussen `useEffect` en `useLayoutEffect` hangt af van de specifieke vereisten van uw event handler en de timing van DOM-updates.

            
import { useRef, useCallback, useLayoutEffect } from 'react';

function useEvent(handler) {
  const handlerRef = useRef(handler);

  useLayoutEffect(() => {
    handlerRef.current = handler;
  }, [handler]);

  return useCallback((...args) => {
    handlerRef.current(...args);
  }, []);
}

            

              
                Copy
              
            
          

Aandachtspunten en Potentiële Problemen

• Complexiteit: Hoewel `useEvent` specifieke problemen oplost, voegt het een laag complexiteit toe aan uw code. Het is belangrijk om de onderliggende concepten te begrijpen om het effectief te gebruiken.
• Overmatig gebruik: Gebruik `useEvent` niet te pas en te onpas. Pas het alleen toe wanneer u te maken heeft met verouderde closures of onnodige re-renders die verband houden met event handlers.
• Testen: Het testen van componenten die `useEvent` gebruiken, vereist zorgvuldige aandacht om ervoor te zorgen dat de juiste handler-logica wordt uitgevoerd. Mogelijk moet u de `useEvent`-hook mocken of rechtstreeks toegang krijgen tot de `handlerRef` in uw tests.

Globale Perspectieven op Gebeurtenisafhandeling

Bij het bouwen van applicaties voor een wereldwijd publiek is het cruciaal om rekening te houden met culturele verschillen en toegankelijkheidseisen bij de afhandeling van gebeurtenissen:

• Toetsenbordnavigatie: Zorg ervoor dat alle interactieve elementen toegankelijk zijn via toetsenbordnavigatie. Gebruikers in verschillende regio's kunnen afhankelijk zijn van toetsenbordnavigatie vanwege handicaps of persoonlijke voorkeuren.
• Touch-evenementen: Ondersteun touch-evenementen voor gebruikers op mobiele apparaten. Houd rekening met regio's waar mobiele internettoegang vaker voorkomt dan desktoptoegang.
• Invoermethoden: Wees u bewust van verschillende invoermethoden die over de hele wereld worden gebruikt, zoals Chinese, Japanse en Koreaanse invoermethoden. Test uw applicatie met deze invoermethoden om ervoor te zorgen dat gebeurtenissen correct worden afgehandeld.
• Toegankelijkheid: Volg altijd de beste praktijken voor toegankelijkheid en zorg ervoor dat uw event handlers compatibel zijn met schermlezers en andere ondersteunende technologieën. Dit is vooral cruciaal voor inclusieve gebruikerservaringen voor diverse culturele achtergronden.
• Tijdzones en Datum/Tijd-formaten: Wanneer u te maken heeft met gebeurtenissen die datums en tijden bevatten (bijv. planningstools, afsprakenkalenders), wees u dan bewust van de tijdzones en datum/tijd-formaten die in verschillende regio's worden gebruikt. Bied gebruikers de mogelijkheid om deze instellingen aan te passen op basis van hun locatie.

Alternatieven voor `useEvent`

Hoewel `useEvent` een krachtige techniek is, zijn er alternatieve benaderingen voor het beheren van event handlers in React:

• State naar boven verplaatsen (Lifting State): Soms is de beste oplossing om de state waarvan de event handler afhankelijk is, naar een hogergelegen component te verplaatsen. Dit kan de event handler vereenvoudigen en de noodzaak voor `useEvent` elimineren.
• `useReducer`:** Als de state-logica van uw component complex is, kan `useReducer` helpen om state-updates voorspelbaarder te beheren en de kans op verouderde closures te verminderen.
• Klassecomponenten: Hoewel minder gebruikelijk in modern React, bieden klassecomponenten een natuurlijke manier om event handlers aan de componentinstantie te binden, waardoor het closure-probleem wordt vermeden.
• Inline Functies met Dependencies: Gebruik inline functie-aanroepen met dependencies om ervoor te zorgen dat verse waarden worden doorgegeven aan event handlers. `onClick={() => handleClick(arg1, arg2)}` waarbij `arg1` en `arg2` via state worden bijgewerkt, zal bij elke render een nieuwe anonieme functie creëren, wat zorgt voor bijgewerkte closure-waarden, maar dit veroorzaakt onnodige re-renders, precies wat `useEvent` oplost.